<template>
  <div class="prizeSetting">
    <div class="form-left"></div>
    <div class="form-right">
      <div class="lottery-product">
        <div class="title" style="margin-bottom: 10px">
          抽奖商品（{{ this.formData.tableData.length }}）
        </div>
        <div style="margin-bottom: 10px" v-if="!readOnly || !passModify">
          <a-button type="primary" @click="addProduct()">添加商品</a-button>
        </div>
        <a-table
          :columns="columns"
          :pagination="false"
          :row-key="(record) => record.key || record.id"
          :data-source="formData.tableData"
        >
          <template slot="operation" slot-scope="text, record, index">
            <div class="row-btn" v-if="!readOnly">
              <span style="color: blue" @click="editProduct(record, index)"
                >编辑</span
              >
              <span style="color: red" @click="deleteProduct(record)"
                >删除</span
              >
            </div>
            <!-- 活动进行中商品修改 -->
            <div class="row-btn" v-if="!passModify">
              <span style="color: blue" @click="editPrizePool(record, index)"
                >编辑</span
              >
            </div>
          </template>
        </a-table>
      </div>
      <div class="lottery-product">
        <div class="title">抽奖人数概率设置</div>
        <a-radio-group
          name="probabilitySetting"
          :disabled="readOnly"
          v-model="formData.probabilitySetting"
        >
          <a-radio class="r-item" value="1"
            >不限人次
            <span style="color: #aaa"
              >按整体概率来有可能活动刚开始奖品就被抽光</span
            ></a-radio
          >
          <a-radio class="r-item" value="2">
            限制人次
            <a-input-number
              v-show="formData.probabilitySetting === '2'"
              v-model="formData.peopleCount"
              :disabled="readOnly"
              :min="100"
              :max="5000"
              :step="1"
              :precision="0"
            />
            <div
              v-show="formData.probabilitySetting === '2'"
              style="color: #aaa"
            >
              以抽奖次数达到设置次数范围按抽奖概率及数量
              颁发若未被抽中则累计至下一轮抽奖次数中,限制（100-5000次）
            </div>
          </a-radio>
        </a-radio-group>

        <div class="title" style="margin-bottom: 10px">
          中奖是否审核（只限于赠品（商城）商品）
        </div>
        <a-radio-group
          name="isAudit"
          style="margin-bottom: 20px"
          :disabled="readOnly"
          v-model="formData.isAudit"
        >
          <a-radio value="1">是 </a-radio>
          <a-radio value="0"> 否 </a-radio>
        </a-radio-group>
        <div class="material" v-if="formData.isAudit == 1">
          <div><span style="color: red">*</span> 上传资料有效时间：</div>
          <a-input-number
            :min="1"
            :step="1"
            :precision="0"
            :disabled="readOnly"
            style="width: 100px"
            v-model="formData.validDuration"
          />
          <span style="margin-left: 5px">天</span>
        </div>

        <a-table
          v-show="formData.probabilitySetting === '2'"
          :columns="productColumns"
          :pagination="false"
          :row-key="(record) => record.key || record.id"
          :data-source="formData.tableData"
        >
        </a-table>
      </div>
      <div class="lottery-gift">
        <div class="title">
          参与送积分 <span class="txt">(每参与抽奖1次获得相应积分)</span>
        </div>
        <div style="padding-left: 8px">
          送
          <a-input-number
            v-model="formData.sendPoints"
            :min="0"
            :disabled="readOnly"
            :step="1"
            :precision="0"
          />
          积分
          <a-checkbox
            style="margin-left: 15px"
            v-model="formData.notWinning"
            :disabled="readOnly"
            >仅送给未中奖用户</a-checkbox
          >
        </div>
        <div class="title">赠品规则</div>
        <div style="position: relative">
          <a-textarea
            placeholder="请输入赠品规则"
            v-model="formData.giftRules"
            :disabled="readOnly"
            :max-length="500"
            :rows="4"
          />
          <span class="limitWords"
            >{{ formData.giftRules.length || 0 }}/500</span
          >
        </div>
      </div>
    </div>
    <add-product
      ref="addProduct"
      :operate="type"
      :editData="editData"
      :goodsIndex="goodsIndex"
      :passModify="passModify"
      :tableData="formData.tableData"
      @comfirmGiftInfo="comfirmGiftInfo"
    ></add-product>
    <updatePrize
      ref="updatePrize"
      :editData="editData"
      :tableData="formData.tableData"
      @comfirmUpdatePrize="comfirmUpdatePrize"
    ></updatePrize>
  </div>
</template>

<script>
import addProduct from "@views/menuPage/marketing/lottery/components/prizeSetting/components/addProduct.vue";
import updatePrize from "./components/updatePrize.vue";

export default {
  name: "prizeSetting",
  components: {
    addProduct,
    updatePrize,
  },
  props: {
    formData: {
      type: Object,
      required: true,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    passModify: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // tableData: [],
      columns: [
        {
          title: "商品名称",
          dataIndex: "prizeName",
          key: "prizeName",
        },
        {
          title: "商品类型",
          dataIndex: "prizeType",
          key: "prizeType",
          customRender: (text, record) => {
            if (text == 1) {
              text = "优惠券";
            } else if (text == 2) {
              text = "积分";
            } else if (text == 3) {
              if (record.goodsType == 3) {
                text = "赠品（自建）";
              } else {
                text = "赠品（商城）";
              }
            }
            return text;
          },
        },
        {
          title: "图片",
          dataIndex: "goodsPicture",
          key: "goodsPicture",
          customRender: (text, record) => {
            if (record.prizeType == 1 || record.prizeType == 2) {
              return (text = "——");
            } else {
              return <table-img src={text} />;
            }
          },
        },
        {
          title: "数量",
          dataIndex: "amount",
          key: "amount",
          align: "center",
        },
        {
          title: "剩余数量",
          dataIndex: "updateRemainCount",
          key: "updateRemainCount",
          align: "center",
          customRender: (text, row) => {
            if (!text) {
              if (row.amount >= row.chooseAmount) {
                return row.amount - row.chooseAmount;
              } else {
                return 0;
              }
            } else {
              return text;
            }
          },
        },
        {
          title: "中奖概率",
          dataIndex: "odds",
          key: "odds",
          align: "center",
          customRender: (text, record) => {
            return text + "%";
          },
        },
        {
          title: "已被抽中数量",
          dataIndex: "chooseAmount",
          key: "chooseAmount",
          align: "center",
          customRender: (text, record) => {
            if (text) {
              return text;
            } else {
              return 0;
            }
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          width: 125,
          scopedSlots: { customRender: "operation" },
        },
      ],
      productColumns: [
        {
          title: "商品名称",
          dataIndex: "prizeName",
          key: "prizeName",
        },
        {
          title: "商品类型",
          dataIndex: "prizeType",
          key: "prizeType",
          customRender: (text, record) => {
            if (text == 1) {
              text = "优惠券";
            } else if (text == 2) {
              text = "积分";
            } else if (text == 3) {
              if (record.goodsType == 3) {
                text = "赠品（自建）";
              } else {
                text = "赠品（商城）";
              }
            }
            return text;
          },
        },
        {
          title: "图片",
          dataIndex: "goodsPicture",
          key: "goodsPicture",
          customRender: (text, record) => {
            if (record.prizeType == 1 || record.prizeType == 2) {
              return (text = "——");
            } else {
              return <table-img src={text} />;
            }
          },
        },
        {
          title: "数量",
          dataIndex: "amount",
          key: "amount",
        },
        {
          title: "剩余数量",
          dataIndex: "updateRemainCount",
          key: "updateRemainCount",
          align: "center",
          customRender: (text, row) => {
            if (!text) {
              if (row.amount >= row.chooseAmount) {
                return row.amount - row.chooseAmount;
              } else {
                return 0;
              }
            } else {
              return text;
            }
          },
        },
        {
          title: "中奖概率",
          dataIndex: "odds",
          key: "odds",
          align: "center",
          customRender: (text, record) => {
            return text + "%";
          },
        },
        {
          title: "颁发数量",
          dataIndex: "issueCount",
          key: "issueCount",
          customRender: (text, record) => {
            if (this.readOnly) {
              return (
                <a-input-number
                  v-model={record.issueCount}
                  min={1}
                  step={1}
                  precision={0}
                  max={record.amount}
                  disabled
                />
              );
            } else {
              return (
                <a-input-number
                  v-model={record.issueCount}
                  min={1}
                  max={record.amount}
                  step={1}
                  precision={0}
                />
              );
            }
          },
        },
      ],
      // probabilitySetting: "1",
      // peopleCount: 100,
      // sendPoints: 0,
      // notWinning: false,
      // giftRules: "",
      type: "add",
      editData: {},
      goodsIndex: "",
      // formData: {
      //   tableData: [],
      //   probabilitySetting: "1",
      //   peopleCount: 100,
      //   sendPoints: 0,
      //   notWinning: false,
      //   giftRules: "",
      // },
    };
  },
  methods: {
    // 添加
    addProduct() {
      this.type = "add";
      this.$refs.addProduct.visible = true;
      this.editData = {};
      this.goodsIndex = "";
    },
    // 编辑
    editProduct(row, index) {
      console.log(row);
      this.type = "edit";
      this.editData = row;
      this.goodsIndex = index + "";
      this.$refs.addProduct.visible = true;
    },
    editPrizePool(row, index) {
      console.log(row);
      this.editData = row;
      this.$refs.updatePrize.visible = true;
    },

    // 删除
    deleteProduct(row) {
      this.$confirm({
        title: "删除操作",
        content: "是否确定删除该商品，删除后将不可恢复",
        okText: "确认删除",
        cancelText: "取消",
        onOk: () => {
          this.formData.tableData.splice(row.key, 1);
          this.formData.tableData.forEach((item, index) => {
            item.key = index;
          });
        },
        onCancel() {},
      });
    },
    comfirmGiftInfo(e, opration, index) {
      if (opration && opration != "add") {
        this.formData.tableData[index * 1] = e;
        this.$set(this.formData.tableData, index * 1, e);
      } else {
        e.chooseAmount = 0;
        e.issueCount = 1;
        this.formData.tableData.push(e);
        //活动进行中新增奖品
        if (!this.passModify) {
          const prizeItem = {};
          if (e.prizeType == 1) {
            prizeItem.prizeType = e.prizeType * 1;
            prizeItem.relationId = e.relationId;
            prizeItem.prizeName = e.prizeName;
            prizeItem.amount = e.amount;
            prizeItem.odds = e.odds;
            prizeItem.issueCount = e.issueCount;
            prizeItem.activityId = this.$route.query.id;
          } else if (e.prizeType == 2) {
            prizeItem.prizeType = e.prizeType * 1;
            prizeItem.prizeName = e.prizeName;
            prizeItem.amount = e.amount;
            prizeItem.odds = e.odds;
            prizeItem.issueCount = e.issueCount;
            prizeItem.integralCount = e.integralCount;
            prizeItem.activityId = this.$route.query.id;
          } else if (e.prizeType == 3) {
            prizeItem.prizeType = e.prizeType * 1;
            prizeItem.prizeName = e.prizeName;
            prizeItem.amount = e.amount;
            prizeItem.odds = e.odds;
            prizeItem.issueCount = e.issueCount;
            prizeItem.relationId = e.relationId;
            prizeItem.validDay = e.validDay;
            prizeItem.goodsType = e.goodsType;
            prizeItem.activityId = this.$route.query.id;
          }
          this.updataPrizePool(prizeItem);
        }
      }
      this.formData.tableData.forEach((item, index) => {
        item.key = index;
      });
    },
    //进行中修改奖品
    comfirmUpdatePrize(e) {
      console.log(e);
      this.formData.tableData.forEach((item, index) => {
        if (e.id == item.id) {
          console.log(this.formData.tableData);
          this.formData.tableData[index] = e;
          this.$set(this.formData.tableData, index, e);
        }
      });
    },
    //修改奖品池中的商品，当活动进行中修改才会调用
    async updataPrizePool(params) {
      let res = await this.$post(
        "goldenhome/gh/lottery/admin_/lottery/activity/prize/pool/update",
        params
      );
      if (res && res.returnCode == 1000) {
        // console.log(res);
        this.$message.success("新增奖品成功");
        this.formData.tableData[this.formData.tableData.length - 1].id =
          res.dataInfo;
      }
    },
  },
};
</script>

<style scoped lang="less">
.prizeSetting {
  display: flex;
  padding: 20px;
  // .form-left {
  //   width: 221px;
  //   height: 472px;
  //   background-repeat: no-repeat;
  // }
  .form-right {
    // width: calc(100% - 221px);
    width: 100%;
    padding-left: 20px;
    .lottery-product {
      margin-top: 10px;
      .title {
        font-size: 16px;
      }
      .txt {
        font-size: 12px;
        color: #aaaaaa;
      }
      .row-btn {
        display: flex;
        span {
          display: inline-block;
          margin-right: 10px;
          cursor: pointer;
        }
      }
      .r-item {
        display: block;
        padding-left: 5px;
        height: 40px;
        line-height: 40px;
      }
    }
    .lottery-gift {
      .title {
        font-size: 16px;
        margin: 15px 0 8px 0;
      }
    }
  }
}
.limitWords {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 10px;
  color: #ccc;
}
.material {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>
